.home-movie{
  background: var(--page-bg);
  min-height: 100vh;
  .home-nav-bar{
    color: var(--title-color);
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--page-bg);
    .box-flex{
      margin: 0 24px;
      align-items: center;
      font-size: 30px;
      font-weight: bold;
      flex-wrap: wrap;
      .img{
        width: 40px;
        height: 40px;
      }
      .distance{
        flex-basis: 100%;
        font-size: 24px;
        color: #989898;
        margin-top: 4px;
        font-weight: 400;
      }
    }
  } //  home-nav-bar end
  .movie-banner{
    padding: 24px;
    height: 174px;
    .banner-img{
      width: 100%;
      height: 174px;
      border-radius: 10px;
    }
  }
  .movie-tabs{
    padding: 32px 0;
    line-height: 1;
    display: flex;
    justify-content: space-evenly;
    .tabs-item{
      font-size: 28px;
      color: var(--subT-color);
      display: flex;
      align-items: center;
      &.active{
        color: var(--theme-color);
        font-weight: 700;
      }
    }
  }  /// movie-tabs end

  .hoting-list{
    .list-item{
      display: flex;
      margin: 20px;
      margin-top: 0;
      padding: 16px;
      background: #fff;
      border-radius: 16px;
      .item-img{
        width: 144px;
        height: 192px;
        display: block;
        margin-right: 20px;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        .img{
          width: 100%;
          height: 192px;
        }
        .img-icon{
          position: absolute;
          bottom: 8px;
          right: 8px;
          width: 36px;
          height: 36px;
        }
      }
      .item-info{
        font-size: 24px;
        color: var(--subT-color);
        flex: 1;
        .info-h2{
          font-size: 32px;
          color: var(--title-color);
          font-weight: bold;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
        }
        .info-p{
          margin-bottom: 16px;
        }
      }
      .item-button{
        background: var(--theme-color);
        color: #fff;
        line-height: 1;
        padding: 16px 28px;
        border-radius: 40px;
        font-size: 24px;
        white-space: nowrap;
        margin: auto;
      }
    }
  } /// hoting-list end

  .info-tags{
    display: flex;
    .tags-span{
      font-size: 20px;
      color: #fff;
      background: #A8A8A8;
      line-height: 1;
      padding: 4px 8px;
      border-radius: 6px;
      margin-left: 16px;
      font-weight: 400;
    }
  }
  .upcoming-list{      
    .list-title{
      font-size: 32px;
      color:var(--title-color);
      font-weight: bold;
      padding: 22px;
      padding-bottom: 0;
      text{
        font-size: 24px;
        color: var(--subT-color);
        font-weight: 400;
        display: block;
      }
    }
    .list-item{
      display: flex;
      margin: 20px;
      padding: 16px;
      background: #fff;
      border-radius: 16px;
      .item-img{
        width: 144px;
        height: 200px;
        display: block;
        margin-right: 20px;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        .img{
          width: 100%;
          height: 200px;
        }
        .img-icon{
          position: absolute;
          bottom: 8px;
          right: 8px;
          width: 36px;
          height: 36px;
        }
      }
      .item-info{
        font-size: 24px;
        color: var(--subT-color);
        flex: 1;
        .info-h2{
          font-size: 32px;
          color: var(--title-color);
          font-weight: bold;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
        }
        .info-p{
          margin-bottom: 16px;
        }
      }
      .item-button{
        background: var(--theme-color);
        color: #fff;
        line-height: 1;
        padding: 16px 28px;
        border-radius: 40px;
        font-size: 24px;
        border: 1px solid transparent;
        white-space: nowrap;
        margin: auto;
        &.favorites{
          background: var(--sub-theme);
        }
        &.already_favorites{
          background: #fff;
          color: #4A4D54;
          border-color: #4A4D54;
        }
      }
    }
  }
  .var-empty{
    color: var(--subT-color);
    .img{
      width: 240px;
      height: 240px;
      display: block;
      margin: 0 auto;
    }
    .h2{
      font-size: 28px;
      font-weight: bold;
      margin: 24px 0 8px;
      color: var(--subT-color);
    }
    .p{
      font-size: 24px;
    }
  }
}